{% extends 'common/_base_center.html' %}
{% load static %}
{% block title %}重置密码{% endblock %}
{% block localcss %}
{% endblock %}
{% block content %}
    <div class="row w-100 mx-0 auth-page">
        <div class="col-md-8 col-xl-6 mx-auto">
            <div class="card">
                <div class="row">
                    <div class="col-md-4 pr-md-0">
                        <div class="auth-left-wrapper">

                        </div>
                    </div>
                    <div class="col-md-8 pl-md-0">
                        <div class="auth-form-wrapper px-4 py-5" style="min-height: 530px">
                            <span class="noble-ui-logo d-block mb-2">Single Sign-on <span> System </span></span>
                            <h5 class="text-muted font-weight-normal mb-4">
                                {% if error %}
                                    <span style="color:red">{{ error.message }}</span>
                                {% else %}
                                    Ldap Reset Password
                                {% endif %}
                            </h5>


                            <div class="container">
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div id="standard" class="container tab-pane active"><br>
                                        <form class="forms-sample" method="post">
                                            <div class="form-group">
                                                <label>Password</label>
                                                <input type="password" class="form-control" name="password1"
                                                       id="password1"
                                                       autoComplete="new-password" placeholder=""
                                                        onblur="validate_passwd()">
                                            </div>
                                            <span id="tishi1"></span>
                                            <br/>
                                            <div class="form-group">
                                                <label>Confirm password</label>
                                                <input type="password" class="form-control" name="password2"
                                                       id="password2"
                                                       autoComplete="new-password" placeholder=""
                                                       onkeyup="validate()">
                                            </div>
                                            <span id="tishi"></span>

                                            <br/>


                                            <div class="mt-3">
                                                <button id="submit" type="submit" onclick="on_submit()"
                                                        class="btn btn-primary btn-icon-text mr-2 mb-2 mb-md-0">
                                                    submit
                                                </button>
                                            </div>
                                            Already have ldap login and password? <a href="/login/"
                                                                                     class="d-inline-block mt-3 text-muted">
                                            Sign in</a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block localjs %}
    <script>
        function on_submit() {
            let email_prefix = $('#email_prefix').val();
            if (email_prefix !== '') {
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
        }

        function validate_passwd() {
            //校验密码复杂度
            var password1 = document.getElementById("password1").value;
            let pwdRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,32}$/;
            if (!pwdRegex.test(password1)){
                document.getElementById("tishi1").innerHTML = "<font color='red'>须8-32个字符，至少包含1个大写字母，1个小写字母和1个数字</font>";
                document.getElementById("submit").disabled = true;
                document.getElementById("password2").disabled = true;
            }else{
                document.getElementById("tishi1").innerHTML = "<font color='green'>密码符合标准</font>";
                document.getElementById("submit").disabled = false;
                document.getElementById("password2").disabled = false;
            }
        }

        function validate() {
            //校验两次密码是否一致
            var password1 = document.getElementById("password1").value;
            var password2 = document.getElementById("password2").value;
            if (password1 === password2) {
                document.getElementById("tishi").innerHTML = "<font color='green'>两次密码相同</font>";
                document.getElementById("submit").disabled = false;
            } else {
                document.getElementById("tishi").innerHTML = "<font color='red'>两次密码不相同</font>";
                document.getElementById("submit").disabled = true;
            }
        }
    </script>
{% endblock %}